import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { BookInfo } from "@/types";
import { getSingleBookInfoByID } from "@/apis";
import { Card } from "antd";
import { Tooltip } from "antd";
import style from "./index.module.less";
import { fixNullData } from "@/utils";

const SingleBook: React.FC = () => {
  let params = useParams();
  let [bookData, setBookData] = useState<BookInfo>({
    characteristics: "",
    code: "",
    courseType: "",
    credit: "",
    key: undefined,
    newestReference: "",
    newestReferenceWebsite: "",
    referenceFormatInfo: "",
    referenceWebsite: "",
    textbook: "",
    textbookFormatInfo: "",
    textbookWebsite: "",
    id: "",
    institute: "",
    major: "",
    name: "",
    period: "",
    prerequisite: "",
    reference: "",
  });
  useEffect(() => {
    getSingleBookInfoByID(params.id as string)
      .then((res) => {
        setBookData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  });
  return (
    <div className={style.mainHolder}>
      <h1 className={style.bookTitle}>书籍详细页面</h1>
      <br />
      <Card title={<div className={style.bookCardTitle}>{bookData.name}</div>}>
        <p className={style.redShow}>【课程编码】{bookData.code}</p>
        <p className={style.redShow}>【课程名称】{bookData.name}</p>
        <p className={style.redShow}>【课程开设学院】{bookData.institute}</p>
        <p className={style.redShow}>【适用专业】{bookData.major}</p>
        <p>
          【学分】{bookData.credit} 【总学时】{bookData.period}
        </p>
        <p>【课程性质】{bookData.characteristics}</p>
        <p>【课程类别】{bookData.courseType}</p>
        <p>【先修课程】{bookData.prerequisite}</p>
        <Tooltip placement="topLeft" title={bookData.textbookFormatInfo}>
          <a
            href={bookData.textbookWebsite}
            target="_blank"
            className={style.bookLinkTitle}
          >
            <p className={style.redShow}>【选用教材】{bookData.textbook}</p>
            <p className={style.clickText}>←←←点击获取</p>
          </a>
        </Tooltip>

        <Tooltip placement="topLeft" title={bookData.referenceFormatInfo}>
          <a
            href={bookData.referenceWebsite}
            target="_blank"
            className={style.bookLinkTitle}
          >
            <p>【参考书目】{bookData.reference} </p>

            <p className={style.clickText}>←←←点击获取</p>
          </a>
        </Tooltip>
        {(() => {
          if (bookData.newestReference !== "nan") {
            return (
              <>
                {" "}
                <Tooltip
                  placement="topLeft"
                  title={fixNullData(bookData.newestReference)}
                >
                  <p className={style.redShow}>
                    【最新参考书目】{fixNullData(bookData.newestReference)}
                  </p>
                </Tooltip>
              </>
            );
          } else {
            return null;
          }
        })()}
      </Card>
    </div>
  );
};

export default SingleBook;
